<template>
	<view class="video-content" :style="container_style" style="min-height: 100vh; height: auto !important; padding-bottom: 50rpx;">
		<view class="share" @click="make">邀约海报</view>

		<view class="top"><img :src="video_top_img" class="top-img" style="width: 100%;" /></view>
		<view class="video-title">{{ video_title }}</view>
		<view class="main-video">
			<video
				:src="video_url"
				x5-video-player-type="h5-page"
				controls
				:poster="video_cover"
				loop="true"
				autoplay="true"
				:show-fullscreen-btn="false"
			></video>
		</view>
		<view class="qrimg"><tki-qrcode ref="qrcode" :val="code_value" :show="show" :size="size" @result="qrR" /></view>

		<openAlert ref="haibao" :BgColor="BgColor" closeBtn>
			<view class="haibao-open">
				<view style="color: white;font-size: 35rpx;position: absolute;width: 100%;text-align: center;">长按图片,分享好友</view>
				<image :src="haibao_url" style="height: 950rpx;width: 560rpx;border-radius: 20rpx;margin-top: 50rpx;"></image>
			</view>
		</openAlert>
		<button class="enter-btn-con" @click="back_home">进入报名</button>
	</view>
</template>

<script>
require('../../components/poster/poster_maker.js');
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import openAlert from '@/components/open-alert/open-alert';
export default {
	components: {
		tkiQrcode,
		openAlert
	},
	data() {
		return {
			video_info: [],
			top_img: '',
			container_style: '',
			video_top_img: '',
			video_url: '',
			video_cover:'',
			video_title: '',
			video_id: 0,
			activity_id: 0,
			code_value: '',
			size: 400,
			show: false,
			haibao_url: '',
			BgColor: '#838383',
			haibao_title: '',
			url: '',
			company_name: '',
			haibao_id: '',
			sharemaintitle: '',
			sharetitle: '',
			shareimage: '',
			staff_id:0,
			pid:0
		};
	},
	onLoad(option) {
		if (option.video_id == undefined) {
			option.video_id = 0;
		} else {
			option.video_id = parseInt(option.video_id);
		}
		this.video_id = option.video_id;
		if(option.staff_id == undefined){
			option.staff_id = 0
		}
		if(option.pid == undefined){
			option.pid = 0
		}
		this.staff_id = option.staff_id
		this.pid = option.pid
		this.$comm.appLogin(user_info=>{
			this.get_video_info(option.video_id);
		})
		
	},
	methods: {
		get_video_info(id) {
			this.$comm.request({
				url: 'api/activity_video_info',
				method: 'GET',
				data: {
					video_id: id
				},
				success: res => {
					console.log(res,123)
					let data = res.data;
					if (this.container_style) {
						this.container_style += ';background-color:' + data.result.activity_info.background;
					} else {
						this.container_style = 'background-color:' + data.result.activity_info.background;
					}
					let staff_info = data.result.staff_info;
					this.staff_info = staff_info;
					this.video_top_img = data.result.activity_info.video_top_img;
					this.video_url = data.result.video_url;
					this.video_cover = data.result.video_cover;
					this.video_title = data.result.title;
					this.activity_id = data.result.activity_info.id;
					this.sharemaintitle = data.result.activity_info.share_title
					this.sharetitle = data.result.activity_info.share_content
					this.shareimage = data.result.activity_info.share_img
					this.haibao_id = data.result.activity_info.haibao_id
					let share_url = this.$comm.app_config.share_url + '/index/video?video_id=' + this.video_id + '&staff_id=' + this.staff_info['staff_id'] + '&pid=' + this.staff_info['pid'];
					this.url = share_url;
					this.company_name = this.staff_info['fac_name'];
					this.share();
				}
			});
		},
		
		//制作二维码
		make() {
			if (this.haibao_url) {
				this.$refs.haibao.Show();
			} else {
				this.code_value = this.url;
				setTimeout(() => {
					this.$refs.qrcode._makeCode();
				}, 200);
			}
		},

		//分享
		share() {
			if (this.sharemaintitle == "" || null) this.sharemaintitle = '易卖通首届线上家博会';
			if (this.sharetitle == "" || null) this.sharetitle = '海量新品爆品,产品物流空前优惠,不容错过';
			if (this.shareimage == "" || null) this.shareimage = 'https://jbh.4coder.org.cn/web/share_img.jpg';
			this.$comm.setShare({
				title: this.video_title,
				desc: this.company_name + this.sharetitle + this.video_title,
				imgUrl: this.video_cover,
				link: this.url
			});
		},

		//生成海报
		qrR(e) {
			let haibao_title = '';
			let staff_info = this.staff_info;
			if (staff_info['fac_name']) {
				haibao_title = staff_info['staff_name'] + '(' + staff_info['fac_name'] + ')';
			} else {
				haibao_title = staff_info['staff_name'];
			}

			postMaker(this.haibao_id, [ e, haibao_title], 500, url => {
				this.haibao_url = url;
				this.$refs.haibao.Show();
			});
		},
		back_home() {
			uni.navigateTo({
				url: '/pages/index/index?activity_id=' + this.activity_id+'&staff_id=' + this.staff_id + '&pid=' + this.pid
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.video-content {
	height: 100vh;
}
.share {
	width: 160rpx;
	line-height: 50rpx;
	background-color: #2c405a;
	position: fixed;
	right: 0;
	top: 80rpx;
	border-radius: 25rpx 0 0 25rpx;
	color: #ffffff;
	text-align: center;
	font-size: 28rpx;
	z-index: 2;
}

.main-video {
	text-align: center;
}
.main-video video {
	width: 710rpx;
	height: 400rpx;
}
.video-title {
	font-size: 40rpx;
	color: #ffffff;
	margin-bottom: 50rpx;
	text-align: center;
}
.enter-btn-con {
	width: 400rpx;
	background-color: #fff700;
	color: #495ffe;
	border-radius: 50rpx;
	margin-top: 30rpx;
	font-weight: bold;
	font-size: 35rpx;
}
.enter-btn-con:after {
	border: none;
}
.qrimg {
	height: 0;
	overflow: hidden;
}
</style>
